<!--suppress ALL -->
<template>
	<div>
		<!--面包屑-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }"> 首页</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!--卡片式图-->
		<el-card>
			<!--添加角色按钮-->
			<el-button type="primary" @click="openAddRoles">添加角色</el-button>
			<!--列表区域-->
			<el-table :data="roleslIST" border stripe>
				<!--展开列-->
				<el-table-column type="expand">
					<!--在展开列中插入作用域插槽-->
					<template slot-scope="scope">
						<!--在展开里中进行数据循环及渲染 一级权限-->
						<el-row :class="['row-center', 'bdbottom', index1 === 0 ? 'bdtop' : '']" v-for="(item1, index1) in scope.row.children" :key="item1.id">
							<el-col :span="5">
								<el-tag @close="removeRightsById(scope.row, item1.id)" closable>
									{{ item1.authName }}
								</el-tag>
								<i class="el-icon-caret-right"></i>
							</el-col>
							<el-col :span="19">
								<!--二级权限-->
								<el-row :class="['row-center', index2 !== 0 ? 'bdtop' : '']" v-for="(item2, index2) in item1.children" :key="item2.id">
									<el-col :span="6">
										<el-tag @close="removeRightsById(scope.row, item2.id)" closable type="success">{{ item2.authName }} </el-tag>
										<i class="el-icon-caret-right"></i>
									</el-col>
									<el-col :span="18">
										<!--三级权限-->
										<el-tag @close="removeRightsById(scope.row, item3.id)" closable type="warning" v-for="(item3, index3) in item2.children" :key="item3.id">{{ item3.authName }} </el-tag>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</template>
				</el-table-column>
				<!--索引列-->
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column prop="roleName" label="角色名称"></el-table-column>
				<el-table-column prop="roleDesc" label="角色描述"></el-table-column>
				<el-table-column label="操作" width="290">
					<!--插入作用域插槽-->
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditRoles(scope.row)">编辑 </el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRoles(scope.row)">删除 </el-button>
						<el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRightsDialog(scope.row)"> 分配权限 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!--分配权限对话框-->
		<el-dialog title="分配权限" :visible.sync="dialogVisible" width="50%" @close="setRightsClose">
			<!--树形控件-->
			<el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"> </el-tree>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="allotRights()">确 定</el-button>
			</span>
		</el-dialog>

		<!--添加角色对话框-->
		<el-dialog title="添加角色" :visible.sync="addRolesdialogVisible" width="25%">
			<!--input输入框-->
			<el-form :model="addRolesForm" label-width="80px">
				<el-form-item label="角色名称">
					<el-input v-model="addRolesForm.roleName"></el-input>
				</el-form-item>
				<el-form-item label="角色描述">
					<el-input v-model="addRolesForm.roleDesc"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addRolesdialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitAddRoles">确 定</el-button>
			</span>
		</el-dialog>

		<!--编辑角色对话框-->
		<el-dialog title="添加角色" :visible.sync="editRolesdialogVisible" width="25%">
			<!--input输入框-->
			<el-form :model="editRolesForm" label-width="80px">
				<el-form-item label="角色名称">
					<el-input v-model="editRolesForm.roleName"></el-input>
				</el-form-item>
				<el-form-item label="角色描述">
					<el-input v-model="editRolesForm.roleDesc"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="editRolesdialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitEditRoles">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<!--JS-->
<script>
export default {
	data() {
		return {
			roleslIST: [],
			dialogVisible: false,
			// 树形数据源
			rightsList: [],
			// 树形绑定属性对象
			treeProps: {
				children: 'children',
				label: 'authName',
			},
			// 默认选中的节点ID数值
			defKeys: [],
			//当前即将分配的ID
			roleId: '',
			addRolesdialogVisible: false,
			addRolesForm: {
				roleName: '',
				roleDesc: '',
			},
			editRolesdialogVisible: false,
			editRolesForm: {
				roleName: '',
				roleDesc: '',
				id: '',
			},
		}
	},
	//TODO 声明周期函数，在页面渲染前通过getRolesList获取数据
	created() {
		this.getRolesList()
	},
	methods: {
		//TODO 角色列表ajax请求
		async getRolesList() {
			const { data: res } = await this.$http.get('roles')
			if (res.meta.status !== 200) {
				return this.$message.error('角色列表获取失败')
			} else {
				this.roleslIST = res.data
			}
		},

		//TODO 根据ID删除权限
		// RolesId:角色ID
		//  RightsId:权限ID
		removeRightsById(Roles, RightsId) {
			this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const { data: res } = await this.$http.delete('roles/' + Roles.id + '/rights/' + RightsId)
					if (res.meta.status !== 200) {
						return this.$message.error('删除失败')
					}
					this.$message({
						type: 'success',
						message: '删除成功!',
					})
					Roles.children = res.data
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},

		//TODO 分配权限
		async showSetRightsDialog(role) {
			this.roleId = role.id
			const { data: res } = await this.$http.get('rights/tree')
			if (res.meta.status !== 200) {
				return this.$message.error('获取权限失败')
			}
			this.rightsList = res.data
			//递归获取三级节点的ID
			this.getLeafKeys(role, this.defKeys)
			this.dialogVisible = true
		},

		// TODO 通过递归的形式,获取角色下所有已选择三级权限的ID并保存到数组中
		getLeafKeys(node, arr) {
			// 如果当前node节点不包含children属性则是三级节点
			if (!node.children) {
				return arr.push(node.id)
			}
			node.children.forEach(item => this.getLeafKeys(item, arr))
		},

		//TODO 监听分配权限对话框的关闭
		setRightsClose() {
			this.defKeys = []
		},

		//TODO 点击确认提交分配权限
		async allotRights() {
			const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
			const idStr = keys.join(',')
			// console.log(idStr)
			const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
			if (res.meta.status !== 200) {
				return this.$message.error('分配权限失败')
			}
			this.$message.success('分配权限成功')
			this.getRolesList()
			this.dialogVisible = false
		},

		//TODO 打开添加角色对话框
		openAddRoles() {
			this.addRolesdialogVisible = true
		},

		//TODO 执行添加角色操作
		async submitAddRoles() {
			const { data: res } = await this.$http.post('roles', {
				roleName: this.addRolesForm.roleName,
				roleDesc: this.addRolesForm.roleDesc,
			})
			console.log(res)
			if (res.meta.status !== 201) {
				return this.$message.error('添加角色失败')
			}
			this.$message.success('添加角色成功')
			this.getRolesList()
			this.addRolesdialogVisible = false
		},

		//TODO 删除角色
		deleteRoles(rolesInfo) {
			this.$confirm('此操作将永久删除角色, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const { data: res } = await this.$http.delete('roles/' + rolesInfo.id)
					if (res.meta.status !== 200) {
						return this.$message.error('删除角色失败')
					}
					this.getRolesList()
					this.$message({
						type: 'success',
						message: '删除成功!',
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},

		//TODO 打开编辑角色对话框
		openEditRoles(rolesInfo) {
			this.editRolesForm.roleName = rolesInfo.roleName
			this.editRolesForm.roleDesc = rolesInfo.roleDesc
			this.editRolesForm.id = rolesInfo.id
			this.editRolesdialogVisible = true
		},

		// TODO 提交编辑角色结果
		async submitEditRoles() {
			const { data: res } = await this.$http.put('roles/' + this.editRolesForm.id, {
				roleName: this.editRolesForm.roleName,
				roleDesc: this.editRolesForm.roleDesc,
			})
			if (res.meta.status !== 200) {
				return this.$message.error('修改角色失败')
			}
			this.$message.success('编辑角色成功')
			this.getRolesList()
			this.editRolesdialogVisible = false
		},
	},
}
</script>

<!--CSS-->
<style lang="less" scoped>
.el-tag {
	margin: 7px;
}

.bdbottom {
	border-bottom: 1px solid #eee;
}

.bdtop {
	border-top: 1px solid #eee;
}

.row-center {
	display: flex;
	align-items: center;
}
</style>
